<template>
  <view :class="['custom-list', listClass]" :style="[listStyle, customStyle]">
    <!-- 列表头部 -->
    <view v-if="showHeader || $slots.header" class="list-header">
      <slot name="header">
        <view v-if="title" class="list-title">
          <text class="title-text">{{ title }}</text>
          <text v-if="subtitle" class="subtitle-text">{{ subtitle }}</text>
        </view>
        <view v-if="showAction" class="list-action" @click="handleActionClick">
          <slot name="action">
            <text class="action-text">{{ actionText }}</text>
            <text class="iconfont-v2 icon-jiantouyou action-icon"></text>
          </slot>
        </view>
      </slot>
    </view>

    <!-- 列表内容 -->
    <view class="list-content">
      <!-- 自定义列表项 -->
      <slot name="items">
        <view 
          v-for="(item, index) in items" 
          :key="getItemKey(item, index)"
          :class="['list-item', itemClass, { 'list-item--disabled': item.disabled }]"
          :style="getItemStyle(item, index)"
          @click="handleItemClick(item, index)"
        >
          <!-- 左侧内容 -->
          <view class="item-left">
            <slot name="left" :item="item" :index="index">
              <!-- 头像/图标 -->
              <view v-if="item.avatar || item.icon" class="item-avatar">
                <image 
                  v-if="item.avatar" 
                  :src="item.avatar" 
                  class="avatar-img"
                  mode="aspectFill"
                />
                <text 
                  v-else-if="item.icon" 
                  :class="['iconfont-v2', item.icon]"
                  class="avatar-icon"
                ></text>
              </view>
              
              <!-- 主要内容 -->
              <view class="item-main">
                <text v-if="item.title" class="item-title">{{ item.title }}</text>
                <text v-if="item.subtitle" class="item-subtitle">{{ item.subtitle }}</text>
                <text v-if="item.description" class="item-description">{{ item.description }}</text>
              </view>
            </slot>
          </view>

          <!-- 右侧内容 -->
          <view class="item-right">
            <slot name="right" :item="item" :index="index">
              <!-- 标签 -->
              <view v-if="item.tags && item.tags.length" class="item-tags">
                <text 
                  v-for="(tag, tagIndex) in item.tags" 
                  :key="tagIndex"
                  :class="['item-tag', tag.type ? `item-tag--${tag.type}` : '']"
                >
                  {{ tag.text }}
                </text>
              </view>
              
              <!-- 额外信息 -->
              <text v-if="item.extra" class="item-extra">{{ item.extra }}</text>
              
              <!-- 箭头 -->
              <text 
                v-if="item.arrow !== false" 
                class="iconfont-v2 icon-jiantouyou item-arrow"
              ></text>
            </slot>
          </view>
        </view>
      </slot>
    </view>

    <!-- 列表底部 -->
    <view v-if="showFooter || $slots.footer" class="list-footer">
      <slot name="footer">
        <view v-if="footerText" class="footer-text">{{ footerText }}</view>
      </slot>
    </view>

    <!-- 空状态 -->
    <view v-if="showEmpty && (!items || items.length === 0)" class="list-empty">
      <slot name="empty">
        <EmptyState 
          :type="emptyType"
          :title="emptyTitle"
          :description="emptyDescription"
          @button-click="handleEmptyButtonClick"
        />
      </slot>
    </view>
  </view>
</template>

<script>
/**
 * 通用列表组件
 * @description 通用的列表组件，支持多种样式和自定义内容
 * @author 系统
 * @date 2024
 */

import EmptyState from './EmptyState.vue'

export default {
  name: 'CustomList',
  components: {
    EmptyState
  },
  props: {
    // 列表数据
    items: {
      type: Array,
      default: () => []
    },
    // 列表标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 底部文本
    footerText: {
      type: String,
      default: ''
    },
    // 操作文本
    actionText: {
      type: String,
      default: '更多'
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: false
    },
    // 是否显示底部
    showFooter: {
      type: Boolean,
      default: false
    },
    // 是否显示操作按钮
    showAction: {
      type: Boolean,
      default: false
    },
    // 是否显示空状态
    showEmpty: {
      type: Boolean,
      default: true
    },
    // 空状态类型
    emptyType: {
      type: String,
      default: 'default'
    },
    // 空状态标题
    emptyTitle: {
      type: String,
      default: '暂无数据'
    },
    // 空状态描述
    emptyDescription: {
      type: String,
      default: '当前没有相关数据'
    },
    // 列表变体: 'default' | 'bordered' | 'card' | 'divided'
    variant: {
      type: String,
      default: 'default',
      validator: value => ['default', 'bordered', 'card', 'divided'].includes(value)
    },
    // 自定义类名
    listClass: {
      type: String,
      default: ''
    },
    // 列表项类名
    itemClass: {
      type: String,
      default: ''
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 列表样式
    listStyle: {
      type: Object,
      default: () => ({})
    },
    // 获取列表项唯一标识的函数
    itemKey: {
      type: [String, Function],
      default: 'id'
    }
  },
  methods: {
    // 获取列表项的唯一标识
    getItemKey(item, index) {
      if (typeof this.itemKey === 'function') {
        return this.itemKey(item, index)
      }
      return item[this.itemKey] || index
    },
    
    // 获取列表项样式
    getItemStyle(item, index) {
      return item.style || {}
    },
    
    // 处理列表项点击
    handleItemClick(item, index) {
      if (item.disabled) return
      this.$emit('item-click', item, index)
    },
    
    // 处理头部操作点击
    handleActionClick() {
      this.$emit('action-click')
    },
    
    // 处理空状态按钮点击
    handleEmptyButtonClick() {
      this.$emit('empty-button-click')
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-list {
  background: white;
  border-radius: 24rpx;
  overflow: hidden;

  // 变体样式
  &--bordered {
    border: 2rpx solid #e5e5e5;
  }

  &--card {
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }

  &--divided {
    .list-item {
      border-bottom: 2rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  // 列表头部
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .list-title {
      flex: 1;

      .title-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }

      .subtitle-text {
        font-size: 24rpx;
        color: #666;
        display: block;
      }
    }

    .list-action {
      display: flex;
      align-items: center;
      color: #ED6567;
      cursor: pointer;

      .action-text {
        font-size: 26rpx;
        margin-right: 8rpx;
      }

      .action-icon {
        font-size: 24rpx;
        transition: transform 0.3s ease;
      }

      &:hover .action-icon {
        transform: translateX(4rpx);
      }
    }
  }

  // 列表内容
  .list-content {
    .list-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      cursor: pointer;
      transition: background-color 0.3s ease;
      position: relative;

      &:hover:not(.list-item--disabled) {
        background-color: #f8f9fa;
      }

      &:active:not(.list-item--disabled) {
        background-color: #e9ecef;
      }

      &--disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
      }

      // 左侧内容
      .item-left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;

        .item-avatar {
          margin-right: 24rpx;
          flex-shrink: 0;

          .avatar-img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            object-fit: cover;
          }

          .avatar-icon {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 50%;
            font-size: 32rpx;
            color: #999;
          }
        }

        .item-main {
          flex: 1;
          min-width: 0;

          .item-title {
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
            display: block;
            margin-bottom: 8rpx;
            line-height: 1.4;
          }

          .item-subtitle {
            font-size: 26rpx;
            color: #666;
            display: block;
            margin-bottom: 4rpx;
            line-height: 1.3;
          }

          .item-description {
            font-size: 24rpx;
            color: #999;
            display: block;
            line-height: 1.3;
          }
        }
      }

      // 右侧内容
      .item-right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 20rpx;

        .item-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8rpx;
          margin-right: 16rpx;

          .item-tag {
            padding: 4rpx 12rpx;
            border-radius: 16rpx;
            font-size: 20rpx;
            background: #f0f0f0;
            color: #666;

            &--primary {
              background: rgba(237, 101, 103, 0.1);
              color: #ED6567;
            }

            &--success {
              background: rgba(82, 196, 26, 0.1);
              color: #52c41a;
            }

            &--warning {
              background: rgba(255, 149, 0, 0.1);
              color: #ff9500;
            }

            &--danger {
              background: rgba(255, 77, 79, 0.1);
              color: #ff4d4f;
            }
          }
        }

        .item-extra {
          font-size: 26rpx;
          color: #999;
          margin-right: 16rpx;
        }

        .item-arrow {
          font-size: 24rpx;
          color: #ccc;
          transition: transform 0.3s ease;
        }
      }

      &:hover .item-arrow {
        transform: translateX(4rpx);
      }
    }
  }

  // 列表底部
  .list-footer {
    padding: 30rpx;
    border-top: 2rpx solid #f5f5f5;

    .footer-text {
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
  }

  // 空状态
  .list-empty {
    padding: 80rpx 40rpx;
  }
}

// 特殊用途的列表样式
.custom-list {
  // 消息列表
  &--message {
    .list-item {
      .item-left {
        .item-avatar {
          position: relative;

          .online-indicator {
            position: absolute;
            bottom: 4rpx;
            right: 4rpx;
            width: 16rpx;
            height: 16rpx;
            background: #52c41a;
            border: 2rpx solid white;
            border-radius: 50%;
          }
        }
      }

      .item-right {
        .unread-badge {
          width: 16rpx;
          height: 16rpx;
          background: #ff4d4f;
          border-radius: 50%;
          margin-right: 16rpx;
        }
      }
    }
  }

  // 设置列表
  &--settings {
    .list-item {
      .item-right {
        .item-extra {
          color: #ED6567;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
